<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <!-- 引入模板引擎js文件 -->
    <script src="./libs/template-web.js"></script>
    <!-- 引入分页插件 -->
    <script src="./06-pagination分页插件使用/jquery.twbsPagination.js"></script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            文章列表
        </div>
        <div class="container-fluid common_con">
            <div class="row opt_btns">
                <div class="col-xs-6">
                    <form class="form-inline">
                        <select id="selCategory" name="" class="form-control input-sm">
                            <option value="">所有分类</option>
                            <option>未分类</option>
                            <option>奇趣事</option>
                            <option>会生活</option>
                            <option>爱旅行</option>
                        </select>
                        <select id="selStatus" name="" class="form-control input-sm">
                            <option value="">所有状态</option>
                            <option value="草稿">草稿</option>
                            <option value="已发布">已发布</option>
                        </select>
                        <button id="btnSearch" class="btn btn-default btn-sm">筛选</button>
                    </form>
                </div>
                <div class="col-xs-6">
                    <a href="article_release.html" class="btn btn-success btn-sm pull-right" id="release_btn">发表文章</a>
                </div>
            </div>
            <table class="table table-striped table-bordered table-hover mp20">
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>王积千造统最头</td>
                        <td>杰克</td>
                        <td>奇趣事</td>
                        <td class="text-center">2017-06-08 07:08:46</td>
                        <td class="text-center">已发布</td>
                        <td class="text-center">
                            <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                            <a href="javascript:void(0);" class="btn btn-danger btn-xs delete">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="row text-center">
                <ul id="pagination" class="pagination-sm"></ul>
            </div>
        </div>
    </div>
    <script src="./libs/http.js"></script>
    <script id="category" type="text/html">
    <option value="">所有分类</option>
    {{each data v}}
    <option value={{v.id}}>{{v.name}}</option>
    {{/each}}
 </script>
 
    <script id="page" type="text/html">
        {{each data.data v}}
        <tr>
            <td>{{v.title}}</td>
            <td>{{v.author}}</td>
            <td>{{v.category}}</td>
            <td class="text-center">{{v.date}}</td>
            <td class="text-center">{{v.state}}</td>
            <td class="text-center">
                <a href="article_edit.html?id={{v.id}}" class="btn btn-default btn-xs" >编辑</a>
                <a href="javascript:void(0);" class="btn btn-danger btn-xs delete" data-id ={{v.date}}>删除</a>
            </td>
        </tr>
        {{/each}}
    </script>
    <script>
        // 入口函数
        $(function () {
            // 一开始就调用渲染函数
            // 给文章种类添加赋值
            $.ajax({
                url: bigNews.category_list,
                type: 'get',
                dataType: 'json',
                success: function (backData) {
                    $('#selCategory').html(template('category', backData))
                }
            });
            // 先进行一次渲染
            function start(page,flag) {
                $.ajax({
                    url: bigNews.article_query,
                    type: 'get',
                    dataType: 'json',
                    data: {
                        type: $('#selCategory').val(),
                        state: $('#selStatus').val(),
                        page: page,
                        perpage: 10
                    },
                    success: function (backData) {
                        console.log(backData);
                        var res = template('page', backData)
                        $('tbody').html(res)
                        //页面一加载：默认请求第一页数据 筛选默认请求第一页 page=1
                        if (flag) {
                        loadPagination(backData.data.totalPage, page);
                        }
                    }
                });
            }
            // 点筛选
            $('#btnSearch').on('click', function (e) {
                start(1,true);
                return false;
            });
            // 一开始就调用
            $('#btnSearch').click();
            /**
           * @description:加载分页组件 
           * @param {type} totalPages ：总页数
           * @param {type} startPage ：当前页数
           * @return: 
           */
            function loadPagination(totalPages, startPage) {
                //(1)先销毁上一次的分页数据
                $('#pagination').twbsPagination('destroy');
                //(2)加载分页插件
                $('#pagination').twbsPagination({
                    totalPages: totalPages,
                    startPage: startPage,
                    visiblePages: 6,
                    first: '首页',
                    prev: '上一页',
                    next: '下一页',
                    last: '尾页',
                    onPageClick: function (event, page) {
                        //如果点击的页数与当前页数不一致，则发送ajax请求
                        //也可以在请求的时候添加判断 是谁点击的 是筛选那就需要调用分页插件
                        //如果不是那就不调用
                        //如果不判断当前页数和点击页数的 就会形成递归
                        if (page != startPage) {
                            start(page);
                            console.log('当前页：' + startPage);
                            console.log('点击页：' + page);
                        };
                    }
                });
            };
            //删除文章 
            $('.table>tbody').on('click','delete',function () {
                var $id  = $(this).attr('data-id');
                $.ajax({
                    url:BigNew.article_delete,
                    type:'post',
                    dataType:'json',
                    data:{id:id},
                    success: function(backData){
                        console.log(backData);
                        if(backData.code == 204){
                            alert('删除成功');
                            //刷新页面
                            window.location.reload();
                        }
                        
                    }
                });
            })
            // 发表文章
            $('#release_btn').on('click',function () {
                // 问题 如何在article_list.html中获取index.html的元素?
                // $('选择器',window.parent.document):在父页面DOM树查询元素
                $('.level02 li:eq(1)',window.parent.document).addClass('active').siblings().removeClass('active');
            })
        });
    </script>
</body>

</html>